<template>
    <div class="favorite-section">
      <h3 class="section-title">我的收藏</h3>
      
      <div class="filter-bar">
        <el-select v-model="selectedCategory" placeholder="选择分类" size="small">
          <el-option label="全部" value="all" />
          <el-option 
            v-for="cat in categories" 
            :key="cat" 
            :label="cat" 
            :value="cat" 
          />
        </el-select>
        
        <el-select v-model="selectedSort" placeholder="排序方式" size="small">
          <el-option label="收藏时间(新→旧)" value="time-desc" />
          <el-option label="收藏时间(旧→新)" value="time-asc" />
          <el-option label="价格(高→低)" value="price-desc" />
          <el-option label="价格(低→高)" value="price-asc" />
        </el-select>
      </div>
      
      <div class="favorite-grid">
        <el-card 
          v-for="item in filteredFavorites" 
          :key="item.id" 
          shadow="hover"
          class="favorite-item"
        >
          <div class="item-image">
            <img :src="item.image" :alt="item.name">
            <el-button 
              circle 
              size="small" 
              class="remove-btn" 
              @click="$emit('remove-favorite', item.id)"
            >
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
          <div class="item-info">
            <h4 class="item-name">{{ item.name }}</h4>
            <div class="item-price">¥{{ item.price.toFixed(2) }}</div>
            <div class="item-actions">
              <el-button type="primary" size="small" @click="$emit('add-to-cart', item)">
                加入购物车
              </el-button>
              <el-button size="small" @click="$emit('buy-now', item)">立即购买</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { Close } from '@element-plus/icons-vue'
  
  const props = defineProps({
    favorites: {
      type: Array,
      required: true
    }
  })
  
  defineEmits(['remove-favorite', 'add-to-cart', 'buy-now'])
  
  const categories = ['手机', '电脑', '平板', '耳机', '智能设备']
  const selectedCategory = ref('all')
  const selectedSort = ref('time-desc')
  
  const filteredFavorites = computed(() => {
    let result = [...props.favorites]
    
    // 按分类筛选
    if (selectedCategory.value !== 'all') {
      result = result.filter(item => item.category === selectedCategory.value)
    }
    
    // 排序
    switch (selectedSort.value) {
      case 'time-desc':
        result.sort((a, b) => new Date(b.favoritedAt) - new Date(a.favoritedAt))
        break
      case 'time-asc':
        result.sort((a, b) => new Date(a.favoritedAt) - new Date(b.favoritedAt))
        break
      case 'price-desc':
        result.sort((a, b) => b.price - a.price)
        break
      case 'price-asc':
        result.sort((a, b) => a.price - b.price)
        break
    }
    
    return result
  })
  </script>
  
  <style scoped>
  .favorite-section {
    padding: 20px;
  }
  
  .section-title {
    margin: 0 0 20px;
    color: #333;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .favorite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }
  
  .favorite-item {
    transition: all 0.3s;
  }
  
  .favorite-item:hover {
    transform: translateY(-5px);
  }
  
  .item-image {
    position: relative;
    height: 180px;
    background: #f9f9f9;
    margin-bottom: 10px;
  }
  
  .item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
  
  .item-name {
    margin: 0 0 8px;
    font-size: 14px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .item-price {
    color: #ff5a00;
    font-weight: bold;
    margin-bottom: 12px;
  }
  
  .item-actions {
    display: flex;
    gap: 8px;
  }
  </style>